<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="oP"></p>
  <input type="text" id="oInput">
  <script>
    // 需求：效果，input 输入内容，p 里面跟着变化，数据也是双向绑定的
    const person = {
      name: 'ifer',
      address: '河南'
    };
    const personTemp = { ...person };
    // 操作的对象
    /* Object.defineProperty(person, 'name', {
      get() {
        // 获取 person 中的 name 的时候会触发
        return personTemp.name
      },
      set(newValue) {
        // console.log(newValue)
        // 设置 person 中的 name 的时候会触发
        personTemp.name = newValue
      }
    })
    person.name = 'xxx'
    console.log(person.name) */
    /* Object.keys(person).forEach(item => {
      Object.defineProperty(person, item, {
        get() {
          // 获取 person 中的 name 的时候会触发
          return personTemp[item]
        },
        set(newValue) {
          // console.log(newValue)
          // 设置 person 中的 name 的时候会触发
          personTemp[item] = newValue
        }
      })
    })
    console.log(person) */

    Object.keys(person).forEach(item => {
      Object.defineProperty(person, item, {
        get() {
          return personTemp[item]
        },
        set(newValue) {
          // #2 一旦赋值就触发这里的劫持
          personTemp[item] = newValue
          oP.innerHTML = newValue
          oInput.value = newValue
        }
      })
    })

    oInput.oninput = function (e) {
      // #1 边输入，边赋值，一旦赋值
      person.name = e.target.value
    }
  </script>
</body>

</html>